@import'../../assets/styles/px2rem.scss';
.g-doc {
    overflow-x: hidden; 
    overflow-y: auto; 
    .g-hd {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: px2rem(56);
        background-color: #1dabc5;
        .m-pagenav{
            display: flex;
            margin-right: px2rem(120);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            .itm{
                margin: px2rem(19) px2rem(18) 0 px2rem(18);
                font-size: 18px;
                color: #fff;
                font-weight: 800;
            }
            .itmm{
                b{
                    display: inline-block;
                    height: 28px;
                    margin: 14px 0 0;
                    border-left: 1px solid #61c4d7;
                    font-size: 0;
                }
            }
            .itms{
                margin: px2rem(19) px2rem(18) 0 px2rem(18);
                font-size: 18px;
                color: #fff;
                font-weight: 800;
            }
        }
        .act{
            display: flex;
            height: px2rem(56);
            width: px2rem(108);
            background-color:#1dabc5;
            position: relative;
            .m-login{
                font-size: 22px;
                padding: 0 px2rem(15);
                line-height: px2rem(56);
                color: #fff;
            }
            span{
                display: block;
                height: px2rem(46);
                position: absolute;
                top: px2rem(12);
                right: px2rem(50);
                color: #61c4d7;
                font-weight: 100;
                font-size: 22px;
            }
            .m-search{
                font-size: 22px;
                padding: 0 px2rem(15);
                line-height: px2rem(56);
                color: #fff;
            }
        }
    }
    .g-bd{
        .m-bookdata{
            display: flex;
            padding: px2rem(20) px2rem(10) px2rem(10);
            .cover{
                img{
                    width: px2rem(105);
                    height: px2rem(140);
                    box-shadow: 0 px2rem(5) px2rem(8) rgba(0,0,0,.15);
                }
            }
            .desc{
                .wrap{
                    height: px2rem(74);
                    h1{
                        width: 100%;
                        max-height: px2rem(44);
                        margin-bottom: px2rem(6);
                        margin-left: px2rem(10);
                        margin-top: 0;
                        font-size: 16px;
                        line-height: px2rem(22);
                        color: #333;
                    }
                    .u-starfive{
                        overflow: hidden;
                        margin-bottom: px2rem(6);
                        margin-left: px2rem(10);
                        margin-top: px2rem(8);
                        .u-star{
                            display: flex;
                            p{
                                font-size: 18px;
                                font-style: italic;
                                text-align: right;
                                color: #ffb232;
                            }
                            span{
                                font-size: 10px;
                                text-align: right;
                                color: #ffb232;
                                padding: px2rem(5) 0 0 px2rem(5);
                            }
                        }
                    }
                }
                
                .data{
                    .data-m{
                        li{
                            height: px2rem(25);
                            margin-left: px2rem(10);
                            display: flex;
                            font-size: 12px;
                            color: #666;
                            b{
                                position: relative;
                                top: -3px;
                                background: #fc662a;
                                padding: px2rem(5) px2rem(6) 0;
                                border-radius: px2rem(10);
                                color: #fff;
                                font-weight: 400; 
                                margin-left: px2rem(8);
                            }
                            .data-l{
                                margin-right: px2rem(10);
                            }
                        }
                    }
                }
            }
        }
        .m-bookact{
            .m-bookact-ul{
                display: flex;
                justify-content: space-evenly;
                .m-bookact-ul-l{
                    display: block;
                    height: px2rem(40);
                    border-radius: px2rem(3);
                    border: 1px solid #fc662a;
                    color: #fff;
                    line-height: px2rem(40);
                    text-align: center;
                    background: #fc662a;
                    -webkit-appearance: none;
                    width: 45%;
                }
                .m-bookact-ul-r{
                    display: block;
                    width: 45%;
                    height: px2rem(40);
                    border-radius: px2rem(3);
                    border: 1px solid #ccc;
                    color: #666;
                    line-height: px2rem(40);
                    text-align: center;
                    background: #fff;
                }
            }
        }
        .context{
            margin-top: px2rem(16);
            .am-tabs-content-wrap{
                .u-view{
                    padding: 0 px2rem(16);
                    .m-bookdetail{
                        p{
                            margin-top: px2rem(30);
                            margin-bottom: px2rem(20);
                            line-height: px2rem(22);
                            color: #666;
                        }
                    }
                    .u-more-s{
                        .u-more-r{
                            text-align: right;
                            margin-top: 10px;
                            color: #1ba6be;
                            font-size: 14px;
                            b{
                                color: #c8c8c8;
                            }
                        }
                    }
                    .toc-doc{
                        .u-ttle{
                            color: #999;
                            line-height: 36px;
                            font-size: 14px;
                            border-bottom: 1px solid #bcbcbc;
                        }
                        .toc{

                            ol{
                                li{
                                    h3{
                                        font-size: 14px;
                                        color: #666;
                                        font-weight: 800;
                                    }
                                    p{
                                        margin: 5px 0;
                                        color: #666;
                                    }
                                    border-bottom: 1px solid #bcbcbc;
                                    padding: 16px 0;
                                    font-size: 14px;
                                }
                            }
                        }
                        .u-more{
                            .u-more-l{
                                text-align: right;
                                margin-top: 10px;
                                color: #1ba6be;
                                font-size: 14px;
                                b{
                                    color: #c8c8c8;
                                }
                            }
                        }
                    }
                    .g-ft{
                        background-color: #f7f7f7;
                        padding: px2rem(90) px2rem(10) px2rem(20);
                        .m-cprt{
                            color: #999;
                            text-align: center;
                            b{
                                padding: 0 px2rem(10);
                                font-weight: 100;
                            }
                            .m-crip{
                                margin-bottom: px2rem(10);
                            }
                        }
                    }
                }
                .u-comment{
                    .u-commlist{
                        margin-top: px2rem(50);
                        ul{
                            li{
                                padding: 0 16px 14px;
                                margin-bottom: 18px;
                                border-bottom: 1px solid #bcbcbc;
                                .article{
                                    p{
                                        margin-bottom: 6px;
                                        white-space: pre-wrap;
                                    }
                                }
                                .u-commctrl{
                                    margin-top: 20px;
                                    display: flex;
                                    height: 20px;
                                    color: #b2b2b2;
                                    position: relative;
                                    .u-commctrl-w{
                                        position: absolute;
                                        right: 0px;
                                    }
                                }
                            }
                            li:last-child{
                                border-bottom: 0;
                            }
                        }
                    }
                    .j-page{
                        .u-page{
                            background: #f6f6f6;
                            padding: 15px;
                            text-align: center;
                            color: #666;
                            display: flex;
                            justify-content: center;
                            .j-pre{
                                width: 80px;
                                height: 32px;
                                border-radius: 1px;
                                border: 1px solid #dcdcdc;
                                line-height: 32px;
                                color: #666;
                            }
                            .num{
                                margin: 0 15px;
                                line-height: 32px;
                            }
                            .j-nxt{
                                width: 80px;
                                height: 32px;
                                border-radius: 1px;
                                border: 1px solid #dcdcdc;
                                line-height: 32px;
                                color: #666;
                            }
                        }
                    }
                    .g-ft{
                        
                        background-color: #f7f7f7;
                        padding: px2rem(90) px2rem(10) px2rem(20);
                        .m-cprt{
                            color: #999;
                            text-align: center;
                            b{
                                padding: 0 px2rem(10);
                                font-weight: 100;
                            }
                            .m-crip{
                                margin-bottom: px2rem(10);
                            }
                        }
                    }
                }
                .information{
                    .information-list{
                        padding: 20px 16px;
                        color: #666;
                        ul{
                            li{
                                line-height: 23px;
                            }
                        }
                    }
                    .g-ft{
                        background-color: #f7f7f7;
                        padding: px2rem(165) px2rem(10) px2rem(20);
                        .m-cprt{
                            color: #999;
                            text-align: center;
                            b{
                                padding: 0 px2rem(10);
                                font-weight: 100;
                            }
                            .m-crip{
                                margin-bottom: px2rem(10);
                            }
                        }
                    }
                }
            }
        }
    }
}

.m-nav{
    width: 100%;
    height: px2rem(235);
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    .m-nav-top{
        display: flex;
        // justify-content: space-around;
        width: 100%;
        height: px2rem(95);
        padding-top: px2rem(30);
        li{
            width: 25%;
            .box{
                border-radius: px2rem(10);
                padding: px2rem(11) 0 0;
                margin: 0 auto;
                display: block;
                width: px2rem(56);
                height: px2rem(45);
                text-decoration: none;
                background-color: #61c4d7;
                i{
                    font-size: px2rem(30);
                    padding: px2rem(14) px2rem(14) px2rem(14) px2rem(14);
                    color: #fff;
                }
                
            }
            span{
                padding-top:px2rem(5);
                display: block;
                font-size: px2rem(16);
                color: #666;
                text-align: center;
            }
        }
    }
    .m-nav-bottom{
        display: flex;
        width: 100%;
        height: px2rem(95);
        // padding-bottom: px2rem(30);
        li{
            width: 25%;
            .box{
                border-radius: px2rem(10);
                padding: px2rem(11) 0 0;
                margin: 0 auto;
                display: block;
                width: px2rem(56);
                height: px2rem(45);
                text-decoration: none;
                background-color: #61c4d7;
                i{
                    font-size: px2rem(30);
                    // padding: px2rem(12);
                    padding: px2rem(14) px2rem(20) px2rem(14) px2rem(13);
                    color: #fff;
                }
                
            }
            span{
                padding-top:px2rem(5);
                display: block;
                font-size: px2rem(16);
                color: #666;
                text-align: center;
            }
        }
    }
  }
  
  .am-modal-wrap {
    .am-modal-popup {
      top: px2rem(56);
    }
  }
